{% extends 'crowdeye/base.html' %}

{% block body %}
<h1>CrowdEye Dashboard</h1>
        <div class="row">
            <div class="col m12 l6">
              <div class="card grey darken-3">
                <div class="card-content white-text">
                  <span class="card-title">Number of cameras</span>
                  <p>
                      We have <strong>{{ num_cameras }}</strong> camera(s).
                  </p>
                    <ul id="camera-list">
                    </ul>

                </div>
                <div class="card-action">
                    <a href="{% url 'cameras' %}" class="btn btn-primary">Open Camera Menu</a>
                </div>
              </div>
            </div>
            <div class="col m12 l6">
              <div class="card grey darken-3">
                <div class="card-content white-text">
                  <span class="card-title">People in store</span>
                    <p>People in store: <strong id="ppl_in_store">Loading...</strong></p>
                    <p>Total in: <strong id="total_in">Loading...</strong></p>
                    <p>Total out: <strong id="total_out">Loading...</strong></p>
                </div>
                <div class="card-action">
                    <a href="#" class="btn btn-primary">View detailed statistics</a>
                </div>
              </div>
            </div>
        </div>
        <div class="row">
            <div class="col m12 l6">
              <div class="card grey darken-3">
                <div class="card-content white-text">
                  <span class="card-title">Settings</span>
                    <form method="POST">
                        {% csrf_token %}
                        <input type="number" name="max" class="white-text" placeholder="Maximum number of people in store" />
                        <input type="submit" class="btn btn-submit" value="Submit" />
                    </form>
                </div>
              </div>
            </div>
        </div>
          

        <script>
        window.setInterval(async function(){
            const res = await fetch( window.location.protocol + "//" + window.location.host + '/api/all/' )
            const data = await res.json();
            document.getElementById("ppl_in_store").innerHTML = data['people_in_store'];
            document.getElementById("total_in").innerHTML = data['total_in'];
            document.getElementById("total_out").innerHTML = data['total_out'];
            document.getElementById("camera-list").innerHTML = "";
            for (var i in data.data)
            {
                console.log(data.data[i])
                const cam = document.createElement("li");
                cam.innerHTML = "<strong>ID:</strong> " + data.data[i].node_id;

                document.getElementById("camera-list").appendChild(cam)

                for (var j in Object.keys(data.data[i]))
                {
                    console.log(Object.keys(data.data[i])[j], data.data[i][Object.keys(data.data[i])[j]])
                    const s = document.createElement("li");
                    s.innerHTML = `<strong>${Object.keys(data.data[i])[j]}</strong> ` + data.data[i][Object.keys(data.data[i])[j]];
                    document.getElementById("camera-list").appendChild(s)
                }
            }

        }, 2 * 1000);
    </script>
{% endblock %}